<template>
	<!-- 页面整体容器 -->
	<div class="land-page">
		<!-- 种类选择部分 -->
		<div class="categories">
			<!-- 使用 v-for 循环渲染每一个分类项，绑定唯一的 :key -->
			<div class="category" v-for="category in categories" :key="category" @click="selectCategory(category)">
				{{ category.name }}
			</div>
		</div>
		<!-- 排序选项部分 -->
		<div class="sort-options">
			<!-- 使用 v-for 循环渲染每一个排序选项，绑定唯一的 :key -->
			<div class="sort-option" v-for="option in sortOptions" :key="option"
				:class="{ active: selectedSortOption === option }" @click="selectSortOption(option)">
				{{ option }}
			</div>
		</div>
		<!-- 搜索 -->
		<view class="search-container">
			<u-search v-model="searchValue" :shape="'square'" :bg-color="'#dedede'" placeholder="请输入商品名称"
				@search="onSearch" :border-radius="'16rpx'" />
		</view>

		<view class="container">
			<!-- 组件 -->
			<LandComponent v-for="item in shareList" :key="item.id" :land="item"></LandComponent>
		</view>

        <bottomVue></bottomVue>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 导入组件
	import LandComponent from '@/component/landComponent.vue'; // 这里的路径根据您的项目结构进行修改
	// 底边导航栏组件
	import bottomVue from '@/component/bottom.vue';
	// 定义响应式变量 categories，表示可供选择的种类
	// 注意：去除重复项，避免用户看到重复的分类
	const categories = ref([{
			id: 1,
			name: "蔬菜区"
		},
		{
			id: 2,
			name: "有机地块"
		},
		{
			id: 3,
			name: "果树区"
		},
		{
			id: 4,
			name: "稻田类"
		},
		{
			id: 5,
			name: "茶树区"
		},
		{
			id: 6,
			name: "大姐夫考虑到撒娇"
		},
	]);

	// 定义响应式变量 sortOptions，表示可供选择的排序方式
	const sortOptions = ref(["销量优先", "距离优先", "人气优先"]);

	// 定义响应式变量 selectedSortOption，存储当前选择的排序选项
	const selectedSortOption = ref(sortOptions.value[0]); // 默认选择第一个排序选项

	// 定义响应式变量 searchQuery，存储搜索框中的内容
	const searchQuery = ref("");

	// 搜索
	const searchValue = ref('');
	// 定义函数 selectCategory，处理用户选择某个分类的逻辑
	const selectCategory = (category) => {
		console.log(`Selected category: ${category.name}, ID: ${category.id}`);
	};

	// 定义函数 selectSortOption，处理用户选择某个排序选项的逻辑
	const selectSortOption = (option) => {
		console.log(`选择了排序方式: ${option}`);
		selectedSortOption.value = option; // 更新当前选中的排序方式
	};

	// 定义函数 handleSearch，处理用户在搜索框中输入的逻辑
	const handleSearch = () => {
		console.log(`当前搜索关键词: ${searchQuery.value}`);
		// 在此处可以添加搜索逻辑，比如过滤商品列表等
	};



	// 搜索方法  
	const onSearch = (value) => {
		// 在此处理搜索逻辑
		console.log('搜索内容:', value);
	};

	//   土地的假数据
	const shareList = ref([{
			id: 1,
			image: 'https://via.placeholder.com/150', // 使用占位符图片
			name: '土地A',
			description: '这是一块非常肥沃的土地。',
			price: 10000
		},
		{
			id: 2,
			image: 'https://via.placeholder.com/150', // 使用占位符图片
			name: '土地B',
			description: '这是一块适合种植果树的土地。',
			price: 15000
		}
	]);
	
</script>

<style scoped>
	.container {
		margin-top: 10px;
	 /* width: 94%; */ /* 设置宽度为页面的94% */
	   margin: 0 auto; /* 水平居中 */
	}
	.search-container {
		width: 105%;
		padding-left: 16px;
	}

	/* 页面整体样式 */
	.land-page {
		font-family: Arial, sans-serif;
	}

	/* 搜索框部分样式 */
	.search-bar {
		display: flex;
		padding: 10px;
		background-color: #f0f0f0;
	}

	.search-bar input {
		flex: 1;
		padding: 8px;
		font-size: 16px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	/* 分类部分样式 */
	.categories {
		display: flex;
		background-color: #00C853;
		padding: 10px;
		overflow-x: auto;
		/* 当分类项过多时，允许横向滚动 */
	}

	.category {
		margin-right: 20px;
		font-size: 16px;
		color: white;
		white-space: nowrap;
		cursor: pointer;
		/* 鼠标悬停时显示为可点击 */
	}

	/* 排序选项部分样式 */
	.sort-options {
		display: flex;
		background-color: #ffffff;
		padding: 10px;
	}

	.sort-option {
		margin-right: 15px;
		font-size: 14px;
		cursor: pointer;
		font-weight: bold;
		color: #000000;
	}

	/* 激活的排序选项样式 */
	.sort-option.active {
		color: #00a84f;
		font-weight: bold;
	}
</style>